<template>
  <div class="dashboard-container">

    <el-row class="main-content">
      <el-col :lg="16" :xs="24">
        <div class="card_left_0">
          <div class="card_left_1" style="width: 592px">
            <div class="header-title">
              <el-icon class="header-icon">
                <DataLine/>
              </el-icon>
              <span class="header-title" style="margin-right: 12px">维续率统计</span>
              <a size="small">查看更多</a>
            </div>
            <div class="header-select">
              <div>
                <el-select v-model="selectedYear" size="small" style="width: 100px">
                  <el-option label="2025年" value="2025"/>
                  <el-option label="2024年" value="2024"/>
                </el-select>
                <el-select v-model="selectedMonth" size="small" style="width: 120px; margin-left: 10px">
                  <el-option label="13 月累计维续率" value="13"/>
                  <el-option label="12 月累计维续率" value="12"/>
                </el-select>
              </div>
              <el-radio-group v-model="selectedType">
                <el-radio border size="small" value="1">件数</el-radio>
                <el-radio border size="small" value="2">保费</el-radio>
              </el-radio-group>
            </div>
            <v-chart :option="lineChartOption" style="height: 200px"/>
          </div>
          <div class="card_left_2">
            <div class="header-title">
              <span class="header-title">关键指标进度</span>
            </div>
            <div class="card_left_2_content_1">
              <p>当前指标的完成进度：正常</p>
              <p>预计本年度能够完成目标保费，详情请询问<a>偏差分析。</a></p>
            </div>
            <div class="card_left_2_content_2">
              <div class="con1">
                <div class="flexB" style="padding: 0">
                  <div class="boxNone">
                    <p>目标保费</p>
                    <span style="color: #006EF9;">75%</span>
                  </div>
                  <div class="boxNone">
                    <p>达成保费</p>
                    <span style="color: #006EF9;">75%</span>
                  </div>
                </div>
              </div>
              <div class="con1">
                <div class="boxNone">
                  <span>完成进度</span>
                  <span style="color: #006EF9;margin-left: 12px">75%</span>
                </div>
                <ElProgress
                    :color="progressColor"
                    :percentage="currentPercentage"
                    :show-text="false"
                    :stroke-width="strokeWidth"
                    class="boxNone"
                    style="height: 4px"
                />
              </div>
              <div class="con1">
                <div class="flexB" style="padding: 0">
                  <div class="boxNone">
                    <p>目标件数</p>
                    <span style="color: #006EF9;">75%</span>
                  </div>
                  <div class="boxNone">
                    <p>达成件数</p>
                    <span style="color: #006EF9;">75%</span>
                  </div>
                </div>
              </div>
              <div class="con1">
                <div class="boxNone">
                  <span>完成进度</span>
                  <span style="color: #006EF9;margin-left: 12px">75%</span>
                </div>
                <ElProgress
                    :color="progressColor"
                    :percentage="currentPercentage"
                    :show-text="false"
                    :stroke-width="strokeWidth"
                    class="boxNone"
                    style="height: 4px"
                />
              </div>
            </div>
          </div>
        </div>

        <div class="echart3Area">
          <div class="header-title">
            <el-icon class="header-icon">
              <DataLine/>
            </el-icon>
            <span class="header-title" style="margin-right: 12px">维续率统计</span>
            <a size="small">查看更多</a>
          </div>
          <div class="echart3Area-content">
            <div v-for="(chart, index) in donutCharts" :key="index" class="donut-chart">
              <div class="chart-title">{{ chart.title }}</div>
              <div class="chart-wrapper">
                <ArtRingChart
                    style="width: 240px;height: 130px"
                    :borderRadius="0"
                    :data="artChartData"
                    :radius="['54%', '70%']"
                    :showLegend="true"
                    :centerText="chart.value"
                    legendPosition="bottom"
                />
                <div class="chart-wrapperInfo">
                  <div style="font-size: 16px;color: #006EF9">1380W</div>
                  <div style="font-size: 12px;color: #86909C;margin-bottom: 24px">{{ chart.month }}月份应收保费</div>
                  <div style="font-size: 16px;color: #006EF9">1380W</div>
                  <div style="font-size: 12px;color: #86909C">{{ chart.month }}月份实收保费</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="flexB" style="padding-right: 30px;margin-top: 16px">
          <el-card class="cardTwo" style="padding-top: 0">
            <div class="header-title">
              <el-icon class="header-icon">
                <DataLine/>
              </el-icon>
              <span class="header-title">AI 智能外呼</span>
            </div>
            <div class="stat-content">
              <el-table :data="callTableData" :show-header="true" size="small" border>
                <el-table-column label="任务" prop="task"/>
                <el-table-column label="呼叫次数" prop="callCount" width="120"/>
                <el-table-column label="接通率" prop="connectRate" width="120"/>
                <el-table-column label="重拨次数" prop="resetCount" width="120">
                  <template #default="scope">
                    <span>{{ scope.row.resetCount }}</span>
                    <el-icon v-if="scope.row.hasMore">
                      <More/>
                    </el-icon>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
          <el-card class="cardTwo" style="padding-top: 0">
            <div class="header-title">
              <el-icon class="header-icon">
                <DataLine/>
              </el-icon>
              <span class="header-title">转账成功</span>
            </div>
            <div class="stat-content">
              <el-table :data="transferTableData" :show-header="true" size="small" border>
                <el-table-column label="时间" prop="time" width="60"/>
                <el-table-column label="客户" prop="customer" width="60"/>
                <el-table-column label="产品" prop="product"/>
                <el-table-column label="成交日" prop="transactionDate" width="80"/>
                <el-table-column label="保费" prop="premium" width="80">
                  <template #default="scope">
                    <span>{{ scope.row.premium }}</span>
                    <el-icon v-if="scope.row.hasMore">
                      <More/>
                    </el-icon>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </div>

      </el-col>

      <el-col :lg="8" :xs="24">
        <el-card class="ranking-card">
          <div class="card-header">
            <div class="header-title">
              <el-icon class="header-icon">
                <Trophy/>
              </el-icon>
              <span class="header-title" style="margin-right: 12px">累计维续率排行</span>
              <a size="small">查看更多</a>
              <el-radio-group v-model="selectedType2" style="margin-left: 88px">
                <el-radio border size="small" value="1">机构</el-radio>
                <el-radio border size="small" value="2">个人</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="ranking-list">
            <el-table :data="rankingData" :show-header="true" :stripe="true" border>
              <el-table-column label="排名" prop="time" width="60">
                <template #default="scope">
                  <span>{{ scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="分公司" prop="company"/>
              <el-table-column label="渠道" prop="branch" width="120"/>
              <el-table-column label="累计继续率" prop="rate" width="80">
                <template #default="scope">
                  <span>{{ scope.row.rate || 0 }}%</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>

        <el-card style="margin-top: 24px">
          <div class="card-header">
            <div class="header-title">
              <el-icon class="header-icon">
                <Trophy/>
              </el-icon>
              <span class="header-title" style="margin-right: 12px">待处理</span>
              <a size="small">查看更多</a>
            </div>
          </div>
          <div class="small-card">
            <div class="small-card-header">
              <el-icon>
                <Files/>
              </el-icon>
              <span>品质件持处理</span>
            </div>
            <div class="small-card-value">132 条</div>
            <el-link type="primary">去处理
              <el-icon>
                <ArrowRight/>
              </el-icon>
            </el-link>
          </div>
          <div class="small-card" style="margin-top: 6px">
            <div class="small-card-header">
              <el-icon>
                <Bell/>
              </el-icon>
              <span>假勤处理</span>
            </div>
            <div class="small-card-value">132 条</div>
            <el-link type="primary">去处理
              <el-icon>
                <ArrowRight/>
              </el-icon>
            </el-link>
          </div>
        </el-card>

        <el-card class="ai-card" style="margin-top: 20px">
          <div class="card-header">
            <div class="header-title">
              <el-icon class="header-icon">
                <Bell/>
              </el-icon>
              <span class="header-title" style="margin-right: 12px">续期AI引擎入口</span>
            </div>
          </div>
          <p class="ai-description">智能以如大模型，为你融收保客护航</p>
          <div class="ai-features">
            <div class="ai-feature">
              <div class="feature-title">知识对话助手</div>
              <div class="feature-desc">续期数据<br/>流程疑问<br/>即时解答</div>
            </div>
            <div class="ai-feature">
              <div class="feature-title">续期引擎助手</div>
              <div class="feature-desc">数据看板<br/>趋势洞察<br/>一键生成</div>
            </div>
          </div>
        </el-card>

      </el-col>
    </el-row>

  </div>
</template>

<script lang="ts" setup>
import {ref, computed} from 'vue'
import * as echarts from 'echarts'
import {use} from 'echarts/core'
import {CanvasRenderer} from 'echarts/renderers'
import {LineChart, PieChart} from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  ToolboxComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import {
  Monitor,
  TrendCharts,
  User,
  DataAnalysis,
  DataLine,
  Trophy,
  Files,
  Bell,
  // Robot,
  InfoFilled,
  ArrowDown,
  ArrowRight,
  More,
  DocumentCopy,
  ChatLineRound
} from '@element-plus/icons-vue'

use([
  CanvasRenderer,
  LineChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  ToolboxComponent
])

// Data
const selectedYear = ref('2025')
const selectedMonth = ref('13')
const selectedType = ref('2')
const selectedType2 = ref('1')

const donutCharts = ref([
  {title: '当月达成率（4 月）', value: "98.4%", subValue: '1,380', month: 4},
  {title: '累一达成率（5 月）', value: "88.6%", subValue: '1,380', month: 5},
  {title: '累末达成率（6 月）', value: "78.5%", subValue: '1,380', month: 6}
])

const callTableData = ref([
  {task: '文本', callCount: '文本', connectRate: '文本', resetCount: '1,112.00', hasMore: true},
  {task: '文本', callCount: '文本', connectRate: '文本', resetCount: '1,112.00', hasMore: true},
  {task: '文本', callCount: '文本', connectRate: '文本', resetCount: '1,112.00', hasMore: true}
])

const transferTableData = ref([
  {time: '文本', customer: '文本', product: '文本', transactionDate: '文本', premium: '1,112.00', hasMore: true},
  {time: '文本', customer: '文本', product: '文本', transactionDate: '文本', premium: '1,112.00', hasMore: true},
  {time: '文本', customer: '文本', product: '文本', transactionDate: '文本', premium: '1,112.00', hasMore: true}
])

const rankingData = ref([
  {company: '北京分公司', branch: '个险', rate: 98.6},
  {company: '北京分公司', branch: '银保', rate: 95.6},
  {company: '北京分公司', branch: '个险', rate: 98.6},
  {company: '北京分公司', branch: '银保', rate: 95.6},
  {company: '北京分公司', branch: '个险', rate: 98.6}
])

const currentPercentage = ref(75);
const strokeWidth = ref(146);
const progressColor = ref("#206FFF");

const artChartData = ref([
  { value: 32, name: '二次' },
  { value: 32, name: '三次' },
  { value: 32, name: '四次及以上' },
])

const lineChartOption = ref({
  tooltip: {
    trigger: 'axis',
    axisPointer: {type: 'cross'}
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['1月', '2月', '3月', '4月', '5月', '6月']
  },
  yAxis: {
    type: 'value',
    axisLabel: {formatter: '{value}%'},
    min: 20,
    max: 100
  },
  series: [
    {
      name: '维续率',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      data: [75, 68, 65, 72, 78, 82],
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {offset: 0, color: 'rgba(64, 158, 255, 0.3)'},
          {offset: 1, color: 'rgba(64, 158, 255, 0.05)'}
        ])
      },
      itemStyle: {color: '#409EFF'}
    }
  ]
})

// Methods
const getRankClass = (rank: number) => {
  if (rank <= 3) return `rank-${rank}`
  return ''
}
</script>

<style lang="scss" scoped>
@use "./index.scss";
</style>
